<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <!--
        注意点:
            1.当引入外部js文件之后,在该script标签的标签体中不能存在任何内容
            2.当引入外部js文件之后,不能直接结束,必须同时存在开始标签与结束标签
                错误语法:<script type="text/javascript" src="test.js"/>
    -->
    <!-- 错误案例 -->
    <script type="text/javascript" src="test.js">
        function f1(){
            alert("Hello World");
        }
    </script>
    <script type="text/javascript" src="test.js"></script>
    <script>
        function f1(){
            alert("Hello World");
        }
    </script>
</head>
<body>
<!--
    在JavaScript中,可以对某一个元素绑定对应的js事件
    在标签中添加对应的属性进行实现
    其语法:事件句柄="javascript:事件处理代码"
    在事件中存在三个概念:事件源、事件句柄、事件监听
    事件源:事件触发的源头,用于触发事件的HTML元素
        例如:按钮、超链接...
    事件句柄:对指定的元素做什么事情会触发事件
        例如:点击事件源、双击事件源、鼠标放到事件源上...
    事件监听:当监听到事件被触发之后,我们需要做什么处理
-->
<button onclick="javascript:alert('Hello JavaScript')">简短缩写方式</button><br/>
<!--
    可以在当前HTML文档的任意位置定义一个script标签(一般会在head标签中)
    在script标签中可以定义事件函数
    其语法为:
    function 函数名(参数){
        事件处理
    }
    在对应的元素中可以调用指定的函数
    其语法:事件句柄="函数名()"
-->
<button onclick="f1()">内联方式</button><br/>
<!--
    可以在当前工程中定义一个js文件,该文件以.js结尾
    在该文件中可以定义事件函数,语法与script标签中一致
    在head标签中通过script标签引入对应的外部js文件
    当外部引入的js存在与内联方式的js一致的函数时
    后面的会覆盖前面的
-->
<button onclick="f2()">外部引入</button><br/>
</body>
</html>